<template>
	<view class="container">
		<view v-if="isHead" class="head">
			<view @click="handleScroll('.swiper', 1)" :class="headIndex == 1 ? 'active' : ''" class="item ">
				产品
				<image src="https://m.nocexpo.com/statics/js/modules/h5/img/qiehuan.png" mode="widthFix" />
			</view>
			<view @click="handleScroll('.gys', 2)" :class="headIndex == 2 ? 'active' : ''" class="item">
				详情
				<image src="https://m.nocexpo.com/statics/js/modules/h5/img/qiehuan.png" mode="widthFix" />
			</view>
			<view @click="handleScroll('.data-title', 3)" :class="headIndex == 3 ? 'active' : ''" class="item">
				推荐
				<image src="https://m.nocexpo.com/statics/js/modules/h5/img/qiehuan.png" mode="widthFix" />
			</view>
		</view>
		<swiper class="swiper" :indicator-dots="true" indicator-active-color="#ffffff" indicator-color="rgba(255,255,255,0.32)">
			<swiper-item v-for="(item,index) in nocProduct.bannerList" :key="index">
				<view v-if="item.type == 'mp4'">
					<video class="img" :src="item.url"/>
				</view>
				<view v-else>
					<image class="img" :src="item.url" />
				</view>
			</swiper-item>
		</swiper>
		<view class="box">
			<view class="price">
				<view class="fu">¥</view>
				{{nocProduct.activityProPrice}}
				<view class="grey">到手价</view>
			</view>
			<view class="price1">
				<view class="yishou">
					已售{{nocProduct.remainNum}}件
				</view>
				<view>|</view>
				<view class="xianliang">
					活动限量500件
				</view>
				<view>
					<image  class="tu" :src="imgUrl + '/statics/js/modules/applet/img/xqbaoyou.png'" mode=""></image>
					<image  class="tu1" :src="imgUrl + '/statics/js/modules/applet/img/xqzhpbaozhang.png'" mode=""></image>
									
				</view>
				
				
			</view>
		</view>
		<view class="module info">
			<view class="title">{{nocProduct.tradeName}}</view>
			<view class="tags">
				<view class="t" @click="toTagNews(item)" v-for="(item,index) in tagList1" :key='index'>#{{item.tagName}}</view>
				<view class="t" v-if="visable" @click="showMore()">更多标签</view>
			</view>
		</view>
		<view class="module gys">
			<view class="g">供应商</view>
			<view class="title" style="width: 350rpx;">{{nocProduct.company}}</view>
			<navigator @click="toUserExhibitionHall()" hover-class="none" class="btn">进入展厅</navigator>
		</view>
		<view v-if="exhibition.length>0" v-for="(item, index) in exhibition"
			style="background: rgb(255, 243, 243);border-radius: 10px 0px 10px 10px;display: flex;justify-content: space-between;margin: 0px 18rpx 5px;padding: 2px 14px;">
			<view>
				<image style="width:76rpx;height:40rpx;margin-top: 10rpx;" src="https://m.nocexpo.com/statics/js/modules/h5/img/yicanzhan.png" alt="" />
			</view>
			<view class="content">
				<view id="text" :class="exhibition.length>1?'text':''" style="display: flex;line-height:28px;">
					<view  style="position: relative;left: -40rpx;">{{item.exhibitionShortName}}展位号 :
						{{item.exhibitionHall}}{{item.boothNumber}}&nbsp&nbsp&nbsp&nbsp&nbsp
					</view>
					<view style="width: 124rpx;height: 24px;line-height: 24px;text-align: center;color: #ffffff;background: linear-gradient(360deg, #00aaa6 0%, #54d6d2 100%);border-radius: 8rpx;margin-top: 2px;" @click="topregFormUrl(item.exhibitionEntity.pregFormUrl)">领取门票</view>
				</view>
			</view>
		</view>
		<view class="module attr">
			<view class="item">
				<view>分类</view>
				{{nocProduct.className}}
			</view>
			<view class="item">
				<view>型号</view>
				{{nocProduct.productModel}}
			</view>
			<view class="item">
				<view>品牌</view>
				{{nocProduct.brandName}}
			</view>
			<view class="item">
				<view>品牌范围</view>
				{{nocProduct.brandClassName}}
			</view>
			<view class="item">
				<view>产地范围</view>
				{{nocProduct.originClassName}}
			</view>
			<view class="item">
				<view >适用行业</view>
				{{nocProduct.industry}}
			</view>
			
		</view>

		<view class="module images productDetail">
			<view class="product-title">详情</view>
			<!-- 富文本框 -->
			<rich-text v-html="nocProduct.detail"></rich-text>
		</view>
		<view class="product-title data-title">推荐</view>

		<view class="data-list">
			<view class="product-data-list">
				<navigator class="item" v-for="item in likeProductList" :key="index"  hover-class="none" @click="toProductDetail(item)">
					<image class="img" :src="item.banarImg" mode="widthFix" />
					<view class="new" v-if="item.newTag == 1">新上架</view>
					<view class="title">
						<view class="yang" v-if="item.samplebookId != 0">样册</view>
						<view class="xin" v-if="item.isNewProduct">新品</view>
						{{item.tradeName}}
					</view>
					<view class="tagy" v-if="item.exhibitionList != null && item.exhibition != ''" :style="item.exhibitionList[0].fontBackgroundColor?item.exhibitionList[0].fontBackgroundColor:''">{{item.exhibitionList[0].exhibitionShortName}}</view>
					<view class="price">
						<text>￥</text>
						{{item.price}}
					</view>
				</navigator>
			</view>
		</view>
		<view class="fixed-height"></view>
		<view class="fixed-oper">
			<view class="icons">
				<view class="item" @click="toUserExhibitionHall()" >
					<image class="img" src="https://m.nocexpo.com/statics/js/modules/h5/img/zhanting.png" mode="widthFix" />
					<view class="name">展厅</view>
				</view>
				<view v-if="!ifCollected" class="item" @click="handleCollect()">
					<image class="img" src="https://m.nocexpo.com/statics/js/modules/h5/img/shoucan.png" mode="widthFix" />
					<view class="name">收藏</view>
				</view>
				<view v-else class="item" @click="cancelCollect()">
					<image class="img" src="https://m.nocexpo.com/statics/js/modules/h5/img/yishoucang.png" mode="widthFix" />
					<view class="name">已收藏</view>
				</view>
				<view class="item"  @click="toChat()">
					<image class="img" src="https://m.nocexpo.com/statics/js/modules/h5/img/comment.png" mode="widthFix" />
					<view class="name">私聊</view>
				</view>
			</view>
			<view class="btns">
				<view class="btn" @click="showServiceTelList()">电话联系</view>
				<view class="btn" @click="inquiry()">立即下单</view>
			</view>
		</view>
		<uni-popup ref="contact" type="center">
			<view class="contact-module">

				<view class="item" v-for="(item,index) in serviceTelList" :key="item.id">
					<view class="left">
						<image class="img" src="https://m.nocexpo.com/statics/js/modules/h5/img/ren.png" mode="widthFix" />
						{{item.remark}}
					</view>
          <a :id="'callGP'+index" style="display: none" :href="item.serviceTel?'tel:'+item.serviceTel:'javascript:void(0)'"></a>
					<image @click="callPhone(6, currentUser.id, nocProduct.id, 1,item.serviceTel, index, currentUser.type, currentUser.state)" class="right" src="https://m.nocexpo.com/statics/js/modules/h5/img/phono.png" mode="widthFix" />
				</view>
				<view class="text">联系我时，请说明是“金诺云展”推荐的，谢谢</view>
			</view>
			<view class="contact-close" @click="$refs.contact.close()"><image class="img" src="http://test.noctech.cn/statics/js/modules/h5/img/closs.png" mode="widthFix" /></view>
		</uni-popup>
		<uni-popup ref="collect" mask-background-color="" :is-mask-click="false" type="center">
			<view class="collent-module">
				<image class="img" src="https://m.nocexpo.com/statics/js/modules/h5/img/yishoucang.png" mode="widthFix" />
				<view>收藏成功</view>
			</view>
		</uni-popup>
		<uni-popup ref="cancelcollect" mask-background-color="" :is-mask-click="false" type="center">
			<view class="collent-module">
				<image class="img" src="https://m.nocexpo.com/statics/js/modules/h5/img/yishoucang.png" mode="widthFix" />
				<view>取消收藏成功</view>
			</view>
		</uni-popup>
		<!--全局悬浮-->
		<suspension types="ss" :productId="this.productId" :sampleBook = "this.sampleBook" :samplebookId = "this.nocProduct.samplebookId"></suspension>
	</view>
</template>

<script>
	import indexApi from '@/utils/request/index.js';
	import detailApi from '@/api/productdetail.js';
	import commonApi from '@/utils/commonMethod.js';
export default {
	data() {
		return {
			isHead: false,
			headIndex: 1 ,
			nocProduct:{},
			browseCount:0,
			likeProductList:[],
			productId:'',
			tagList1:[],
			currentUser:{},
			collection:{},
			ifCollected:false,
			vender:{},
			serviceTelList:[],
			visable :false,
			exhibition:[],
			share_desc: "点击进入了解更多产品内容，欢迎来我司展厅参观",
			share_url:'',
			sampleBook:{},
			
			startTime:'', //进入页面时间
			endTime:'',//离开页面时间
			currentUrl:'',//当前页面全路径
			imgUrl: indexApi.baseUrl,

		};
	},
	async onLoad(options) {
		this.productId = options.productId;
		console.log(this.productId)
		await this.getCurrentUser();
		await this.getProductById();
		this.getProductCollectInfo();
	},
	onShow(){
		
		setTimeout(()=> {
			
			if (getApp().globalData.onShow) {
				getApp().globalData.onShow = 0;
				console.log("demo前后台切换之切到前台")
			}
			else {
				console.log("demo页面被切换显示")
				this.startTime = +new Date();
			}
			
		}, 100);
	},
	onHide(){
		setTimeout(() => {
			var that = this
			if (getApp().globalData.onHide) {
				getApp().globalData.onHide = 0;
				console.log("还在当前页面活动")
			}
			else {
				that.endTime = +new Date();
				console.log("demo页面停留时间：" + (that.endTime - that.startTime))
				var stayTime = Math.round((that.endTime - that.startTime)/1000);
			   //这里获取到页面停留时间stayTime，然后了可以上报了
			   this.saveFootPrint(stayTime);
			}
		}, 100)
	},
	onUnload(){
		setTimeout(() => {
			var that = this
			if (getApp().globalData.onHide) {
				getApp().globalData.onHide = 0;
				console.log("还在当前页面活动")
			}
			else {
				that.endTime = +new Date();
				console.log("demo页面停留时间：" + (that.endTime - that.startTime))
				var stayTime = Math.round((that.endTime - that.startTime)/1000);
			   //这里获取到页面停留时间stayTime，然后了可以上报了
			   this.saveFootPrint(stayTime);
			}
		}, 100)
	},
	
	async mounted() {
		// await this.getVender();
		// await this.getServiceTelList();
		commonApi.getPageShareConfig().then(res =>{
			  res.data.list.forEach((value, index, array) => {
				if (value.pageParam.includes("product_main")) {
					if (value.shareDescConfig != null && value.shareDescConfig != '') {
						this.share_desc = value.shareDescConfig
					}
				}
			})
		})
    const pages = getCurrentPages()
    const currentPage =pages[pages.length - 1]
    this.share_url = currentPage.$page.fullPath
	},
	onShareAppMessage: function () {//分享
		return {
			title: this.nocProduct.productName + '-' + this.nocProduct.company,
      path: this.share_url + "&sourceUserId=" + uni.getStorageSync("userId"),
			desc: this.share_desc,
			imageUrl: this.nocProduct.bannerList[1].url,
			success: function (res) {
				console.info(res + '成功');
				wx.showToast({
					title: '分享成功',
				})
				// 转发成功
			},
			fail: function (res) {
				console.log(res + '失败');
				// 转发失败
			},
		 
		}
	 },
	/*分享朋友圈 */
	onShareTimeline: function() {
		return {
			title: this.nocProduct.productName + '-' + this.nocProduct.company,
      query: 'productId=' + this.productId + "&sourceUserId=" + uni.getStorageSync("userId"),
			imageUrl: this.nocProduct.bannerList[0].url,
		}
	},

	methods: {
		saveFootPrint(stayTime){
			commonApi.saveFootPrint(this.currentUser.id,this.startTime,stayTime,this.share_url,"产品详情")
			
		},
		toTagNews(item){
			uni.navigateTo({
				url: '/pages/product/tag/tagNewsList?activeIndex=0&tagId=' + item.id
			})
		},
		callPhone(type, userId, businessId, businessType,phone, phoneIndex, userType, userState){
		  commonApi.callPhone(type, userId, businessId, businessType,phone,phoneIndex,userType,userState)
		},
		//询价弹窗
		async inquiry(){
			const obj =JSON.stringify(this.nocProduct)
		  //判断用户是否登陆
		  let res = await commonApi.getUserLoginFlag();
		  if(res){
			uni.redirectTo({
			  url: '/pages/account/login/login',
			})
			return;
		  }
		  uni.redirectTo({
			url: '/pages/product/active/tijiao?productId=' + obj,
		  })
		},
		// //获取展会信息
		async getExhibitionInfo() {
			detailApi.getExhibitionInfo(this.nocProduct.userId).then(res => {
				this.exhibition = res.data.list
			})
		},
		getSampleBook(){
			detailApi.getSampleBook(this.nocProduct.samplebookId).then(res =>{
				this.sampleBook = res.data.nocSampleBook;
			})
		},
		

		//显示更多标签
		showMore(){
			this.tagList1 = this.nocProduct.tagList
			this.visable = false;
		},
		//收藏
		handleCollect() {
			this.$refs.collect.open();
			setTimeout(() => {
				this.$refs.collect.close();
			}, 2000);
			detailApi.handleCollect(this.currentUser.id,this.nocProduct.id).then(res =>{
				this.getProductCollectInfo();
			})
		},
		//取消收藏
		cancelCollect(){
			this.$refs.cancelcollect.open();
			setTimeout(() => {
				this.$refs.cancelcollect.close();
			}, 2000);
			detailApi.cancelCollect(this.collection.id).then(res =>{
				this.getProductCollectInfo();
			})
		},

		async getProductCollectInfo(){
			detailApi.getProductCollectInfo(this.currentUser.id, this.productId).then(res =>{
				this.collection = res.data.collection
				if (this.collection) {
					this.ifCollected = true
				} else {
					this.ifCollected = false
				}
			})
		},

		//获取当前登录用户
		async getCurrentUser(){
			await commonApi.currentUserAxios().then(res =>{
				this.currentUser = res.data.session_user_h5;
        this.getBrowseCount();
        this.queryLikeProduct();
			});
		},
		topregFormUrl(topregFormUrl){
			uni.navigateTo({
        url: '/components/webview/webview?url=' + encodeURIComponent(topregFormUrl.replace('-1', this.nocProduct.userId)),
			})
		},

		handleScroll(e, index) {
			this.headIndex = index;
			uni.pageScrollTo({
				selector: e,
				duration: 300
			});
		},
		async getProductById(){
			detailApi.getProductById(this.productId).then(res =>{
				console.log(res,'111111111111111111111')
				this.nocProduct = res.data.nocProduct;
				if(this.nocProduct && this.nocProduct.tagList){
					//标签显示五个，多于五个的先隐藏（隐藏未做）
					this.nocProduct.tagList.forEach((tag,index) =>{
						if(index < 5){
							this.tagList1.push(tag);
							this.visable = false;
						}else{
							this.visable = true;
						}
					})
				}
				//处理价格为0的产品-改为询价
				if (this.nocProduct.price == 0) {
					this.nocProduct.price = "询价"
				} else {
					this.nocProduct.price = commonApi.handlePrice(this.nocProduct.price)
					// this.nocProduct.price = "￥" + this.nocProduct.price
				}
				//处理图片和视频
				let imgString = this.nocProduct.banarImg
				let banList = imgString.split(',')
				banList.forEach((value, index, array) => {
					const newValue = {url: value, type: "img"}
					array[index] = newValue
				})
				//头图加上视频
				this.nocProduct.bannerList = []
				// this.nocProduct.bannerList.concat(this.nocProduct.productVedioUrl)
				if (this.nocProduct.productVideoUrl) {
					this.nocProduct.bannerList = [...[{url: this.nocProduct.productVideoUrl, type: "mp4"}]]
				}
				this.nocProduct.bannerList = [...this.nocProduct.bannerList,...banList]
				//产品详情解码
				this.nocProduct.detail = decodeURIComponent(this.nocProduct.detailEntity.detail)

				this.getVender();
				this.getExhibitionInfo();
				this.getSampleBook();

			})
		},
		async getBrowseCount(){
			detailApi.getBrowseCount(this.productId).then(res =>{
				this.browseCount = res.data.count;
			})
		},
		async queryLikeProduct(){
			detailApi.queryLikeProduct(6,this.nocProduct.classId,this.nocProduct.tagList).then(res =>{
				this.likeProductList = res.data.page.list;
				if(this.likeProductList.length < 6){
					detailApi.queryLikeProduct(6-this.likeProductList.length).then(response =>{
						this.likeProductList = [...this.likeProductList,...response.data.page.list];
					})
				}
				this.likeProductList.forEach(item =>{
					if(item.banarImg){
						item.banarImg = item.banarImg.split(',')[0]
					}
					if(item.price == 0){
						item.price = '询价';
					}else{
						item.price = commonApi.handlePrice(item.price);
					}
				})
			})
		},
		toProductDetail(item){
			uni.redirectTo({
				url:'/pages/product/productDetail/productDetail?productId=' + item.id,
			})
		},
		toUserExhibitionHall(){
			uni.redirectTo({
				url:'/pages/product/showroom/showroom?userId=' + this.nocProduct.userId,
			})
		},
		async getVender(){
			detailApi.getVender(this.nocProduct.userId).then(res =>{
				this.vender = res.data.nocUser;
				this.getServiceTelList();
			});
		},
		async getServiceTelList(){
			detailApi.getServiceTelList(this.vender != null ? this.vender.id :'').then(res =>{
				this.serviceTelList = res.data.serviceTelList;
			})
		},
		async showServiceTelList(){
			this.register = await commonApi.getUserLoginFlag();
			if (this.register) {
				uni.redirectTo({
					url: '/pages/account/login/login',
				})
			}

			if(this.serviceTelList != null && this.serviceTelList.length > 0){
				this.$refs.contact.open();
			}else{
				uni.showModal({
					title: "",
					content: "该企业暂未提供客服电话，可选择在线沟通.",
					showCancel:false,
					success: function (res) {
						if (res.confirm) {
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			}
		},

	
	  async toChat(){
		//判断是否登录
		this.register = await commonApi.getUserLoginFlag();
		if (this.register) {
		  uni.redirectTo({
			url: '/pages/account/login/login',
		  })
		}
		uni.redirectTo({
			url:'/pages/news/chatDetail/chatDetail?toUserId=' + this.nocProduct.userId + '&productId=' + this.nocProduct.id
		})
		
	  },
  },

  onPageScroll(res) {
		if (res.scrollTop > 100) {
			this.isHead = true;
		} else {
			this.isHead = false;
		}
	},
};
</script>

<style lang="scss">
.box{
	width:750rpx;
	height:126rpx;
	background: url(http://test.noctech.cn/statics/js/modules/applet/img/xqbeijing.png);
	background-size: 100% 100%;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	margin: 0 auto;
	}
.price1{
	margin-top: 5px;
	margin-left: 10px;
	font-size: 26rpx;
	color: white;
	display: flex;
}
.yishou{
	width: 116rpx;
	height: 34rpx;
}
.xianliang{
	margin-left: 10px;
}
.tu{
	width: 58rpx;
	height: 28rpx;
	margin-left: 10px;
}
.tu1{
	width: 102rpx;
	height: 28rpx;
	margin-left: 10px;
}
.container {
	height: auto;
	min-height: 100vh;
}
.head {
	position: fixed;
	top: 0px;
	left: 0px;
	z-index: 3;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 80rpx;
	background: #ffffff;
	box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.09);
	.item {
		margin: 0px 25rpx;
		image {
			width: 30rpx;
			display: block;
			margin: 5rpx auto 0px;
			opacity: 0;
		}
	}
	.active {
		font-size: $font-size-max;
		font-weight: 600;
		image {
			opacity: 1;
		}
	}
}
.swiper {
	height: 750rpx;
	margin-bottom: 18rpx;
	.img {
		width: 750rpx;
		height: 750rpx;
		display: block;
	}
}
.module {
	margin: 0px 18rpx 18rpx;
	padding: 24rpx 28rpx;
	background-color: #ffffff;
	border-radius: 16rpx;
}
.productDetail [alt]{width: 100%;}

	.price {
		display: flex;
		color: white;
		height: 30px;
		font-size: 45rpx;
		font-weight: 600;
		padding-top: 5px;
		margin-left: 10px;
		width: 100%;
		
		.fu {
			font-size: 35rpx;
			margin-top: 10rpx;
			padding-right: 10rpx;
		}
		.grey {
			font-weight: normal;
			font-size: 26rpx;
			color: white;
			margin-top: 18rpx;
			margin-left: 10rpx;
			
		}
	}
	.title {
		font-size: $font-size-max + 2;
		font-weight: 600;
		margin: 16rpx 0px 24rpx;
	}
	.tags {
		margin-top: 12rpx;
		display: flex;
		justify-content: flex-start;
		flex-wrap:wrap;
		.t {
			padding: 0px $interval-min;
			line-height: 48rpx;
			margin-top: 15rpx;
			background: #f2f3f5;
			border-radius: 8rpx;
			color: $text-color-grey;
			margin-right: 16rpx;
			font-size: $font-size-min;
		}
	}

.gys {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 24rpx;
	.g {
		font-weight: 600;
	}
	.title {
	}
	.btn {
		width: 124rpx;
		line-height: 48rpx;
		text-align: center;
		color: #ffffff;
		background: linear-gradient(360deg, #00aaa6 0%, #54d6d2 100%);
		border-radius: 8rpx;
	}
}

.attr {
	.item {
		display: flex;
		align-items: flex-start;
		margin-bottom: 15rpx;
		view {
			width: 115rpx;

			font-weight: 600;
			margin-right: $interval;
		}
	}
	.item:last-child {
		margin-bottom: 0px;
	}
}
.images {
	.img {
		width: 100%;
		display: block;
		margin: 0px auto;
	}
}
.product-title {
	position: relative;
	font-size: $font-size-max + 2;
	margin-bottom: 18rpx;
	font-weight: 600;
	&::after {
		position: absolute;
		bottom: 0px;
		left: 0px;
		width: 60rpx;
		content: '';
		height: 8rpx;
		background: linear-gradient(90deg, #f63737 0%, rgba(255, 124, 69, 0.34) 100%);
	}
}
.data-title {
	padding: 0px $interval + 10;
	&::after {
		left: 43rpx;
	}
}
.data-list {
	margin: 0px 30rpx 18rpx;
}
.fixed-height {
	height: 110rpx;
}
.fixed-oper {
	position: fixed;
	width: 100%;
	height: 108rpx;
	left: 0px;
	bottom: 0px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: #ffffff;
	box-shadow: 0px 0px 6rpx #ddd;
	.icons {
		padding-left: 18rpx;
		display: flex;
		.item {
			text-align: center;
			.img {
				height: 36rpx;
				width: 36rpx;
			}
			.name {
				text-align: center;
				margin-top: 5rpx;
				font-size: $font-size-min;
			}
			&:nth-child(2) {
				margin: 0px 50rpx;
				width: 90rpx
			}
		}
	}
	.btns {
		display: flex;
		padding-right: 18rpx;
		.btn {
			font-size: 28rpx;
			width: 196rpx;
			line-height: 76rpx;
			color: #ffffff;
			text-align: center;
			border-radius: 38rpx;
			border: 2rpx solid #ffffff;
		}
		.btn:last-child {
			background: linear-gradient(90deg, #f63737 0%, #ff7c45 100%);
			margin-left: 12rpx;
		}
		.btn:first-child {
			background: linear-gradient(90deg, #ffc614 0%, #fe8d0b 100%);
		}
	}
}
.contact-module {
	width: 594rpx;
	background: linear-gradient(180deg, #e2f9f9 0%, #ffffff 100%);
	border-radius: 36rpx;
	padding-top: 70rpx;
	padding-bottom: 48rpx;
	.item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 50rpx;
		.left {
			flex: 1;
			display: flex;
			align-items: center;
			font-size: 36rpx;
			margin-left: 34rpx;

			.name {
				text-overflow: ellipsis;
				white-space: nowrap;
				overflow: hidden;
				width: 0px;
				flex: 1;
			}
			.img {
				width: 100rpx;
				height: 100rpx;
				margin-right: 24rpx;
				border-radius: 50%;
			}
		}
		.right {
			margin-left: $interval;
			width: 48rpx;
			margin-right: 46rpx;
		}
	}
	.text {
		color: $text-color-grey;
		font-size: 28rpx;
		padding: 18rpx 34rpx;
		text-align: center;
		background: linear-gradient(270deg, #ffffff 0%, #ecf8f8 100%);
		border-radius: 8rpx;
		margin: 0px 36rpx;
	}
}
.contact-close {
	padding: 48rpx;
	text-align: center;
	.img {
		width: 60rpx;
	}
}
.collent-module {
	width: 232rpx;
	height: 144rpx;
	margin: auto;
	padding-top: 32rpx;
	background: rgb(0, 0, 0, 0.69);
	border-radius: 36rpx;
	text-align: center;
	.img {
		width: 52rpx;
		height: 52rpx;
	}
	view {
		color: #ffffff;
		font-size: 28rpx;
		margin-top: 20rpx;
	}
}
</style>
